<template>
	<view class="page tab-page">
		<view class="mask" v-if="dropMenuVisible" @click="dropMenuVisible = !dropMenuVisible"></view>
		<!-- #ifndef APP-PLUS -->
		<up-navbar :auto-back="false" title-width="200" placeholder bgColor="transparent" :fixed="false">
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<up-navbar :auto-back="false" height="20px" title-width="200" bgColor="transparent" :fixed="false">
		<!-- #endif -->
			<template v-slot:left>
				<text class="title">友商</text>
			</template>
			<template v-slot:right>
				<view class="nav-more" @click="dropMenuVisible = !dropMenuVisible">
					<uni-icons type="plus" size="32"></uni-icons>
					<drop-menu v-model="dropMenuVisible" :list="menuList" @action="action"></drop-menu>
				</view>
			</template>
		</up-navbar>
		<view class="search">
			<up-search placeholder="搜索" v-model="searchText" :clearabled="true" :showAction="false" bg-color="#ffffff"
				search-icon-color="#474a52" placeholder-color="#82868d" height="40"></up-search>
		</view>
		<view class="company-list">
			<view v-for="(company, index) in companyStore.companyList" :key="index" class="company-item">
				<up-cell :title="company.companyAbbreviation || company.companyName" is-link
					:url="`/pageSubOne/business-chat/business-chat?businessId=${company.id}`">
					<template #icon>
						<up-avatar shape="square" style="margin-right: 10rpx;" v-if="company.logo"
							:src="company.logo"></up-avatar>
						<up-avatar shape="square" style="margin-right: 10rpx;" v-else
							:text="(company.companyAbbreviation && company.companyAbbreviation[0]) || company.companyName[0] || '企'"></up-avatar>
					</template>
				</up-cell>
			</view>
		</view>

		<view v-if="!loading && chatList.length == 0">
			<up-empty :icon="getResource('/icon/empty-message.svg')" text="消息为空">
			</up-empty>
		</view>
		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
			<chat-panel :chat-list="chatList" :source-type="$enums.privateMessageType.BUSINESS"></chat-panel>
		</scroll-view>
		
		<!-- #ifdef APP-PLUS -->
		<view>
			<custom-tabbar :selected="1" :business="unreadCount"></custom-tabbar>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		execShareData
	} from '@/utils/qrcode';
	import chatStore from '@/store/chatStore.js'
	import useChatStore from '@/store/chatStore.js'

	export default {
		data() {
			return {
				dropMenuVisible: false,
				menuList: [{
					icon: 'chatboxes',
					iconType: 'uni-icons',
					text: '发起友商群聊'
				}, {
					icon: 'staff',
					iconType: 'uni-icons',
					text: '添加友商群'
				}, {
					icon: 'personadd',
					iconType: 'uni-icons',
					text: '添加友商'
				}, {
					icon: 'scan',
					iconType: 'uni-icons',
					text: '扫一扫'
				},
				// {
				// 	icon: 'redo',
				// 	iconType: 'uni-icons',
				// 	text: '分享'
				// },
				 ],
				location: '',
				searchText: "",
			}
		},
		methods: {
			scanCode() {
				// #ifdef MP-WEIXIN || APP-PLUS
				uni.scanCode({
					// scanType: ['QR_CODE'], //条形码
					success: function(res) {
						execShareData(res)
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						// 微信小程序
						// if (res.errMsg == "scanCode:ok") {
						// 	// 扫描到的信息
						// 	console.log(res.result);
						// } else {
						// 	console.log("未识别到二维码，请重新尝试！")
						// }
					}
				});
				// #endif
				// #ifndef MP-WEIXIN || APP-PLUS
				uni.navigateTo({
					url: "/pageSubOne/scan-code/scan-code"
				})
				// #endif
			},
			action(i, item) {
				if (i === 0) {
					uni.navigateTo({
						url: "/pageSubOne/group/group-add?groupType=1"
					});
				} else if (i === 1) {
					uni.navigateTo({
						url: "/pageSubOne/friend/friend-add?sourceType=1"
					});
				} else if (i === 2) {
					uni.navigateTo({
						url: "/pageSubOne/friend/friend-add?sourceType=1"
					});
				} else if (i === 3) {
					this.scanCode();
				} else if (i === 4) {
					uni.navigateTo({
						url: "/pageSubOne/friend/friend-add"
					});
				} else if (i === 5) {
					uni.navigateTo({
						url: "/pageSubOne/friend/friend-add"
					});
				}

			},
			onGetLocation() {
				uni.navigateTo({
					url: "/pageSubOne/chat/selectMap"
				})
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 1,
						text: this.unreadCount + ""
					})
				} else {
					uni.removeTabBarBadge({
						index: 1,
						complete: () => {}
					})
				}
			},

			// toBusinessChat(id) {
			// 跳转到 公司页
			// 	uni.navigateTo({
			// 		url: '/pageSubOne/business-chat/business-chat?businessId=' + id
			// 		// url:'pageSubOne/friend-business/friend-business'
			// 	})
			// }
		},
		computed: {
			chatList() {
				this.chatStore.resetFriendBusinessChats()
				console.log("this.chatStore.friendBusinessChats.filter",this.chatStore.friendBusinessChats)
				return this.chatStore.friendBusinessChats.filter(e => e.showName && e.showName.includes(this.searchText))
			},
			unreadCount() {
				let count = 0;
				this.chatList.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
			},
			addressInfo() {
				return this.chatStore.addressInfo;
			}
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			}
		},
		onShow() {
			console.log("显示友商");
			this.companyStore.loadCompany().then()
			uni.setStorageSync('location', this.chatStore.addressInfo)
			this.location = uni.getStorageSync('location')
			this.refreshUnreadBadge();
		}
	}
</script>

<style scoped lang="scss">
	.tab-page {
		position: relative;
		display: flex;
		flex-direction: column;

		.mask {
			// background-color: #000;
			// opacity: 0.3;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1
		}

		.title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.search {
			padding-bottom: 20rpx;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90%;
			margin: 0 auto;

			:deep(.u-search__content) {
				border-radius: 12px !important;
			}
		}

		.company-list {
			background-color: white;
		}

		.nav-loc {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			.loc-text {
				color: #0a6cff;
				font-size: 28rpx;
			}
		}

		.nav-more {
			// background-color: #fff;
			cursor: pointer;
			z-index: 2
		}

		.chat-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			line-height: 50rpx;
			text-align: left;
			color: darkblue;
			font-size: 30rpx;
		}

		.scroll-bar {
			flex: 1;
			height: 100%;
		}
	}
</style>